import ReactDOM from 'react-dom'
import { useState, memo } from 'react'

/**
 * 这里在进行更新的时候，因为child是简单的类型，所以可以判定
 * 父组件更新时，这个组件不会更新
 * 但是child2就不一样了，它是复杂的情况，这里就判断不出来
 * 导致child2每次都会更新
 * 浅对比不精确的地方就在这里
 * 要解决这个问题，需要使用useMemo或者useCallback这两个hooks
 * useCallback 它是用来记住引用的函数
 * useMemo 它是用来记住任意的数据，他用法更为强大
 * 也可以使用memo的第二个参数来解决这个问题，但是写法比较繁琐
 * 需要记录每个可能导致数据更新的props，然后都要进行对比
 */

type ChildProps = {
  num: number
}
const Child = memo(({ num }: ChildProps) => {
  console.log('child组件更新')
  return (
    <div style={{ backgroundColor: 'skyblue', padding: 5 }}>
      子组件：<button>点击{num}</button>
    </div>
  )
})
type Child2Props = {
  user: { age: number }
}
const Child2 = memo(({ user }: Child2Props) => {
  console.log('Child2 组件更新')
  return (
    <div style={{ backgroundColor: '#abc', padding: 5 }}>
      子组件2 - 年龄： {user.age}
    </div>
  )
}, function isEacle(pre, next) {
  // console.log(pre, next);
  return pre.user.age === next.user.age
})

const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child num={13} />
      <br />
      <Child2 user={{ age: 18 }} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
